<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用Promise动态的异步加载图片</title>
</head>
<body>
    
</body>
<script>
    /*
        下面的例子就是使用promise  使用promise的好处是我们可以使用.then .catch .finally

        之前实现这个案例是通过回调函数的方法写的  虽然也可以很完美的实现这个一模一样的功能
            但是逻辑条理都没有使用promise这个结构清晰
    */
    function loadImg(url){
        return new Promise((resolve,reject)=>{
            let img = new Image()
            img.src = url
            img.onload = ()=>{
                document.body.appendChild(img)
                return resolve(img)  //直接将这个对象返回  那么我们.then中就可以直接操作这个对象
            }
            img.onerror=()=>{
                class myError extends Error{
                    constructor(msg){
                        super(msg)
                        this.name = 'jimmyError'
                    }
                }
                reject(new myError('失误了'))
            }
        })
    }
    loadImg('./img/02.jpg').then((img)=>{
        img.style.width='400px'
    }).finally(()=>{
        document.querySelector('img').style.border='5px solid #ccc'
    })
</script>
</html>